<template>
	<view class="wrap wcbg-wrap" style="background-color: #F4F6F5;padding-top:20rpx;padding-bottom: 30rpx;">
		<div class="wcbg-form">
			<view class="article-title wcbg-title">山东黄河河务局外出报告单</view>
			<view class="form-item">
				<text class="label">姓名：</text>
				<view class="backColor">
					<input v-model="formData.userName" type="text" disabled="true" placeholder="超级管理员" />
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">职务：</text>
				<view class="backColor">
					<input v-model="formData.zhiwu" type="text" placeholder="请输入" />
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">事由：</text>
				<view class="backColor">
					<textarea v-model="formData.shiyou" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">目的地：</text>
				<view class="backColor">
					<textarea v-model="formData.mudidi" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">时间：</text>
				<view class="backColor">
					<textarea v-model="formData.sdt" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">主持工作负责同志：</text>
				<view class="backColor">
					<textarea v-model="formData.zcgzfztz" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">办公室意见：</text>
				<view class="backColor">
					<textarea v-model="formData.bgsyj" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="signature-label-text" v-if="!signImages['sGrid1'] || signImages['sGrid1'].length === 0">签章处</view>
			<view class="signature-section">
				<view id="sGrid1" class="image-grid">
					<image v-for="(value) in signImages['sGrid1']" v-if="sealOptionsKey.includes('sGrid1')" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">分管领导审批：</text>
				<view class="backColor">
					<textarea v-model="formData.fenguanlingdao" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="signature-label-text" v-if="!signImages['syGrid'] || signImages['syGrid'].length === 0">签章处</view>
			<view class="signature-section">
				<view id="syGrid" class="image-grid">
					<image v-for="(value) in signImages['syGrid']" v-if="sealOptionsKey.includes('syGrid')" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">主要负责人审批：</text>
				<view class="backColor">
					<textarea v-model="formData.zhuyaofuzeren" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="signature-label-text" v-if="!signImages['qfGrid'] || signImages['qfGrid'].length === 0">签章处</view>
			<view class="signature-section">
				<view id="qfGrid" class="image-grid">
					<image v-for="(value) in signImages['qfGrid']" v-if="sealOptionsKey.includes('qfGrid')" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">备注：</text>
				<view class="backColor">
					<textarea v-model="formData.remarks" auto-height placeholder="请输入"></textarea>
				</view>
			</view>
			
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="display: flex; align-items: center; line-height: 1.5;">填报联系人：</text>
				<input v-model="formData.tianbaolianxiren" type="text" disabled="true" placeholder="超级管理员" style="color: gray; font-size: 28rpx; line-height: 1.5; margin-top: -5rpx;" />
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label">联系电话：</text><input v-model="formData.tianbaorenlianxifangshi" type="text" disabled="true" placeholder="" style="color: gray; font-size: 28rpx;line-height: 1.5; margin-top: -5rpx;" />
			</view>
		</div>
	</view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    },
    signImages: {
      type: Object,
      required: true
    },
    sealOptionsKey: {
      type: Array,
      required: true
    },
    handleLongPress: {
      type: Function,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
	.wcbg-wrap {
		background-color: #F4F6F5;
		padding-top: 20rpx;
		padding-bottom: 20rpx; /* Adjusted padding-bottom for better visual spacing */

		.wcbg-form {
			background-color: white;
			padding: 40rpx 30rpx; /* Top/bottom 40rpx, left/right 30rpx */
			border-radius: 8rpx;
			margin: 0 30rpx; /* Added horizontal margin to match the image's overall layout */
		}

		.wcbg-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx; /* Adjusted margin-bottom */
			color: rgb(0, 137, 217); /* Changed color to blue */
			border-bottom: 2rpx solid rgb(0, 137, 217); /* Added blue line below title */
			padding-bottom: 30rpx; /* Padding for the line */
		}

		.form-item {
			display: block; /* Make label and input stack vertically */
			margin-bottom: 20rpx; /* Standard spacing between form items */

			.label {
				width: auto; /* Allow label to take full width */
				font-size: 28rpx;
				color: #333;
				flex-shrink: 0;
				margin-bottom: 10rpx; /* Spacing between label and input */
			}

			.backColor {
				flex: 1;
				background-color: rgb(244, 246, 245); /* Changed background color */
				border-radius: 8rpx;
				padding: 18rpx 24rpx;
				font-size: 28rpx;
				color: #333;
				display: block; /* Ensure backColor takes full width */
				align-items: center;
				min-height: 40rpx;

				input,
				textarea {
					flex: 1;
					font-size: 28rpx;
					border: none;
					outline: none;
					padding: 0;
					margin: 0;
					background: transparent;
				}

				textarea {
					height: auto;
					min-height: 1.5em;
					line-height: 1.5;
				}
			}
		}

		.signature-label-text {
			text-align: center;
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx; /* Spacing from the preceding form item */
			margin-bottom: 10rpx; /* Spacing to the signature images */
		}

		.signature-section {
			display: flex;
			align-items: flex-start; /* Align images to the top if multiple lines */
			margin-top: 0rpx; /* Managed by .signature-label-text's margin-bottom */
			margin-bottom: 30rpx; /* Spacing after the signature section to the next form item */

			.image-grid {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx; /* Spacing between images */

				.seal-image {
					width: 120rpx;
					height: 120rpx;
					object-fit: contain;
					border: none; /* Removed border */
					border-radius: 8rpx;
				}
			}
		}
	}
</style> 